<template>
    <div class="wx-config-edit">
        <m-example title="微信公众号配置">
            <ButtonGroup shape="circle" slot="header-right">
                <Button type="ghost" icon="ios-color-wand-outline"></Button>
                <Button type="ghost" icon="ios-sunny-outline"></Button>
                <Button type="ghost" icon="ios-crop"></Button>
                <Button type="ghost" icon="ios-color-filter-outline"></Button>
            </ButtonGroup>
            <div class="config-filed">
                <div class="config-filed-content">
                    <Form :model="config" :label-width="80">
                        <FormItem label="token" v-if="this.$route.query.type === 'token'">
                            <Input v-model="config.token" placeholder=""></Input>
                        </FormItem>
                        <FormItem label="appid" v-if="this.$route.query.type === 'appid'">
                            <Input v-model="config.appid" placeholder=""></Input>
                        </FormItem>
                        <FormItem label="appsecret" v-if="this.$route.query.type === 'appsecret'">
                            <Input v-model="config.appsecret" placeholder=""></Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click.native="editWxConfig">修改</Button>
                        </FormItem>
                    </Form>
                </div>
                <div class="config-filed-help">
                    <m-divider title="温馨提示"></m-divider>
                </div>
            </div>
        </m-example>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                config: {
                    token: '',
                    appid: '',
                    appsecret: ''
                }
            }
        },
        methods: {
            getWxConfig () {
                const self = this
                this.$http.wxConfig().then(res => {
                    if (res.success === true) {
                        self.config.token = res.data.token
                        self.config.appid = res.data.appid
                        self.config.appsecret = res.data.appsecret
                    }
                })
            },
            editWxConfig () {
                const self = this
                const data = {
                    type: this.$route.query.type,
                    value: this.config[this.$route.query.type]
                }
                this.$http.editWxConfig(data).then(res => {
                    if (res.success === true) {
                        self.$Message.success('修改' + self.$route.query.type + '成功')
                        self.back()
                    }
                })
            }
        },
        created () {
            this.getWxConfig()
        }
    }
</script>
<style lang="less" scoped>
    @import '../../assets/less/Var.less';

    .config-filed {
        display: flex;
        .config-filed-content {
            flex-basis: 60%;
            flex-grow: 0;
            box-sizing: border-box;
            border-right: 1px dashed @border-color;
            padding-right: 20px;
        }
        .config-filed-help {
            flex: 1;
            padding-left: 20px;
        }
    }
</style>